<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tab导航纵向滚动锚定</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
        }

        /* Tab导航样式 */
        .tab-nav {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            background: #2c3e50;
            display: flex;
            z-index: 1000;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        .tab-link {
            flex: 1;
            padding: 15px 20px;
            text-align: center;
            color: #ecf0f1;
            text-decoration: none;
            border: none;
            background: none;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 16px;
            border-bottom: 3px solid transparent;
        }

        .tab-link:hover {
            background: #34495e;
        }

        .tab-link.active {
            background: #3498db;
            border-bottom-color: #2980b9;
            color: white;
        }

        /* 内容区域 */
        .content-container {
            margin-top: 60px;
            /* 为Tab导航留出空间 */
        }

        .content-section {
            min-height: 100vh;
            padding: 80px 20px 40px;
            scroll-margin-top: 60px;
            /* 滚动偏移，避免被导航栏遮挡 */
        }

        /* 不同区块的背景色 */
        #section1 {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }

        #section2 {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            color: white;
        }

        #section3 {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
            color: white;
        }

        #section4 {
            background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
            color: #2c3e50;
        }

        #section5 {
            background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
            color: #2c3e50;
        }

        .section-content {
            max-width: 800px;
            margin: 0 auto;
        }

        h2 {
            font-size: 2.5em;
            margin-bottom: 20px;
            text-align: center;
        }

        p {
            font-size: 1.1em;
            margin-bottom: 15px;
            text-align: justify;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .tab-link {
                padding: 12px 10px;
                font-size: 14px;
            }

            .content-section {
                padding: 60px 15px 30px;
            }

            h2 {
                font-size: 2em;
            }
        }
    </style>
</head>

<body>
    <!-- Tab导航 -->
    <nav class="tab-nav">
        <a href="#section1" class="tab-link active">首页</a>
        <a href="#section2" class="tab-link">服务</a>
        <a href="#section3" class="tab-link">产品</a>
        <a href="#section4" class="tab-link">关于</a>
        <a href="#section5" class="tab-link">联系</a>
    </nav>

    <!-- 内容区域 -->
    <div class="content-container">
        <section id="section1" class="content-section">
            <div class="section-content">
                <h2>欢迎来到我们的网站</h2>
                <p>这里是首页内容区域。向下滚动或点击上方Tab查看其他内容。</p>
                <p>本页面实现了Tab导航与纵向滚动的完美结合，提供流畅的用户体验。</p>
            </div>
        </section>

        <section id="section2" class="content-section">
            <div class="section-content">
                <h2>我们的服务</h2>
                <p>我们提供专业的网站开发、移动应用开发和UI/UX设计服务。</p>
                <p>拥有多年的行业经验，为客户提供高质量的解决方案。</p>
            </div>
        </section>

        <section id="section3" class="content-section">
            <div class="section-content">
                <h2>产品展示</h2>
                <p>探索我们最新的产品线和创新解决方案。</p>
                <p>从企业级应用到消费者产品，我们致力于提供卓越的用户体验。</p>
            </div>
        </section>

        <section id="section4" class="content-section">
            <div class="section-content">
                <h2>关于我们</h2>
                <p>我们是一支充满激情的技术团队，专注于创造卓越的数字产品。</p>
                <p>我们的使命是通过技术创新帮助客户实现业务目标。</p>
            </div>
        </section>

        <section id="section5" class="content-section">
            <div class="section-content">
                <h2>联系我们</h2>
                <p>有任何问题或合作意向，欢迎随时与我们联系。</p>
                <p>我们期待为您提供专业的服务和支持。</p>
            </div>
        </section>
    </div>

    <script>
        // 平滑滚动和Tab高亮功能
        document.addEventListener('DOMContentLoaded', function () {
            const tabLinks = document.querySelectorAll('.tab-link');
            const sections = document.querySelectorAll('.content-section');

            // 点击Tab平滑滚动
            tabLinks.forEach(link => {
                link.addEventListener('click', function (e) {
                    e.preventDefault();
                    const targetId = this.getAttribute('href');
                    const targetSection = document.querySelector(targetId);

                    if (targetSection) {
                        targetSection.scrollIntoView({
                            behavior: 'smooth',
                            block: 'start'
                        });
                    }
                });
            });

            // 滚动时高亮对应Tab
            function highlightActiveTab() {
                let currentSection = '';
                const scrollPosition = window.scrollY + 100; // 偏移量调整

                sections.forEach(section => {
                    const sectionTop = section.offsetTop;
                    const sectionHeight = section.clientHeight;

                    if (scrollPosition >= sectionTop && scrollPosition < sectionTop + sectionHeight) {
                        currentSection = section.getAttribute('id');
                    }
                });

                tabLinks.forEach(link => {
                    link.classList.remove('active');
                    if (link.getAttribute('href') === `#${currentSection}`) {
                        link.classList.add('active');
                    }
                });
            }

            // 监听滚动事件
            window.addEventListener('scroll', highlightActiveTab);

            // 页面加载时执行一次高亮
            highlightActiveTab();
        });

        console.log("=========================>");
    </script>
</body>

</html>